<template>
  <div class="box-hetel">
    <div class="img-box">
      <img :src="hotel.img" width="370px" height="208px" alt="">
    </div>
    <div class="desc-hotel">
      <p class="title-desc">{{hotel.title}}</p>
      <span class="detail-desc">{{hotel.position}} | {{hotel.address}}</span>
      <p class="Price-desc">
        <span style="font-size: 14px;letter-spacing: -0.8px;" v-if="!hotel.price === '暂无报价'">￥</span>{{hotel.price}}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    hotel: {
      type: Object,
      default: {
        img: '',
        title: '',
        position: '',
        address: '',
        price: ''
      }
    }
  }
}
</script>
<style scoped lang="scss">
.box-hetel{
  width: 370px;
  margin-left: 9px;
  margin-right: 9px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 10px;
}
.img-box{
  width: 370px;
  height: 208px;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.desc-hotel{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.title-desc{
  width: 85%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #444;
}
.detail-desc{
  width: 100%;
  color: #999;
  font-size: 12px;
}
.Price-desc{
  margin-top: 10px;
  font-size: 22px;
  color: #FF6600;
  letter-spacing: -0.8px;
}
.ll{

}
</style>
